<template>
  <div>
      <div class="top" >
        <!-- <el-input  min="0" max="2" type="number"  style="width: 20%;margin: 10px 10px;" placeholder="请输入订单状态" prefix-icon="el-icon-search" v-model="name" maxlength="20"></el-input> -->
          <el-select v-model="value" placeholder="请选择订单状态">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
           <el-button type="primary" icon="el-icon-search" @click="searchName">搜索</el-button>
          <el-button style="float: right;" type="primary" @click="handleAdd">添加<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-table :data="order" height="700" border stripe style="width: 100%">
        <el-table-column align="center" prop="sid" label="订单编号" width="100"></el-table-column>
        <el-table-column align="center" prop="ordername" label="用户名" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>联系电话: {{ scope.row.phone}}</p>
              <p>配送地址: {{ scope.row.address}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.ordername }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="订单状态" width="100">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '0'" >待发货</el-tag>
            <el-tag v-if="scope.row.status == '1'" type='warning'>待收货</el-tag>
            <el-tag v-if="scope.row.status == '2'" type='success' >已收货</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="className" label="商品分类" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>code: {{ scope.row.code }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.className }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" label="商品名称" width="200"></el-table-column>
        <el-table-column align="center"  label="总价格" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>商品单价: {{ scope.row.price}}</p>
              <p>购买数量: {{ scope.row.count}}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.price* scope.row.count }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="img" label="商品图" width="200">
          <template  slot-scope="{ row }">
            <img  style="width:200px;" :src="row.img"  alt=""  />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit"  @click="handleUpdata(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete"  @click="handleDel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="addVisible" :modal-append-to-body="false" width="60%" top="0" title="新增" :before-close="Close" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品分类" prop="className">
              <el-select v-model="ruleForm.className" placeholder="请选择">
                <el-option
                  v-for="(item,index) in classNameList"
                  :key="index"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input  v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="price">
              <el-input type="number" v-model="ruleForm.price" ></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input type="number" v-model="ruleForm.count" ></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio  label="0">待发货</el-radio>
                <el-radio label="1">待收货</el-radio>
                <el-radio label="2">已收货</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收货人" prop="ordername">
              <el-input  v-model="ruleForm.ordername" ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input  v-model="ruleForm.phone" ></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input  v-model="ruleForm.address" ></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="img">
              <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/v1/upload/upload" :show-file-list="false" :on-success="handleAvatarSuccess"  >
                <img style="width: 200px" v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addReset('ruleForm')">重置</el-button>
          <el-button type="primary" @click=" add('ruleForm')">提交</el-button>
        </span>
      </el-dialog>
      <el-dialog :visible.sync="updataVisible" :modal-append-to-body="false" width="60%" top="0" title="修改" :before-close="Close" >
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商品分类" prop="className">
              <el-input :disabled="true" v-model="ruleForm.className" ></el-input>
              <!-- <el-select v-model="ruleForm.className" placeholder="请选择">
                <el-option
                  v-for="(item,index) in classNameList"
                  :key="index"
                  :value="item">
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
              <el-input :disabled="true" v-model="ruleForm.name" ></el-input>
            </el-form-item>
            <el-form-item label="单价" prop="price">
              <el-input type="number" :disabled="true" v-model="ruleForm.price" ></el-input>
            </el-form-item>
            <el-form-item label="数量" prop="count">
              <el-input :disabled="true" type="number" v-model="ruleForm.count" ></el-input>
            </el-form-item>
            <el-form-item label="订单状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio  label="0">待发货</el-radio>
                <el-radio label="1">待收货</el-radio>
                <el-radio label="2">已收货</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收货人" prop="ordername">
              <el-input :disabled="true" v-model="ruleForm.ordername" ></el-input>
            </el-form-item>
            <el-form-item label="联系方式" prop="phone">
              <el-input :disabled="true" v-model="ruleForm.phone" ></el-input>
            </el-form-item>
            <el-form-item label="收货地址" prop="address">
              <el-input :disabled="true" v-model="ruleForm.address" ></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="img">
              <img style="width: 200px" :src="imageUrl" alt="">
              <!-- <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/v1/upload/upload" :show-file-list="false" :on-success="handleAvatarSuccess"  >
                <img style="width: 200px" v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload> -->
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updataReset('ruleForm')">重置</el-button>
          <el-button type="primary" @click=" updata('ruleForm')">提交</el-button>
        </span>
      </el-dialog>
  </div>

</template>

<script>
import myaxios from '../http/MyAxios'
import { BASE_URL } from '@/config'
  export default {
    data() {
            
      var Pass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPassword !== '') {
            this.$refs.ruleForm.validateField('checkPassword');
          }
          callback();
        }
      };
      var Pass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        options: [{
          value: '0',
          label: '待发货'
        }, {
          value: '1',
          label: '待收货'
        }, {
          value: '2',
          label: '已收货'
        },
        {
          value: '3',
          label: '全部'
        }],
        value: '',
        order:[],
        classNameList:[],
        productClass:[],
        imageUrl:'',
        id:0,
        name:'',
        addVisible: false,
        updataVisible:false,
        form:[],
        ruleForm: {
          className:'',
          code:'',
          status:'',
          sid:'',
          name:'',
          img:'',
          ordername:'',
          phone: '',
          address: '',
          price:'',
          count:'',
        },
        rules:{
          status:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          address:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          className:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          code:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          ordername:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          phone:[
            {required:true,message:'该字段必填',trigger:'blur'},
            {
              pattern:/^1[3-9]\d{9}$/,
              message:'手机号格式不正确',
              trigger:'blur'
            }
          ],
          name:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          img:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          price:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
          count:[
          {required:true,message:'该字段必填',trigger:'blur'},
          ],
        }
      }
    },
    beforeMount(){
      this.getOrder()
      this.getProductClass()
    },
    methods: {
      handleAvatarSuccess(res) {
        this.imageUrl = res.result;
      },
      updataReset(formName) {
        this.$refs[formName].resetFields();
        this.ruleForm = {}
        this.imageUrl = ''
      },
      updata(formName){
        let url1 = BASE_URL + '/v1/index/classNameSearch'
        myaxios.get(url1,{name:this.ruleForm.className}).then(res=>{
             this.ruleForm.code = res.data.data[0].code
             this.$refs[formName].validate((valid) => {
                if (valid) {
                this.form.sid = this.sid
                this.form.className =  this.ruleForm.className
                this.form.code = this.ruleForm.code
                this.form.name =  this.ruleForm.name
                this.form.price =  this.ruleForm.price
                this.form.count =  this.ruleForm.count
                this.form.address = this.ruleForm.address
                this.form.ordername =this.ruleForm.ordername
                this.form.phone = this.ruleForm.phone
                this.form.status = this.ruleForm.status
                this.form.img =  this.imageUrl
                console.log(this.form);
                  let url=BASE_URL + '/v1/order/shopOrderUpdate'
                    myaxios.post(url,this.form).then(()=>{
                      this.$message({
                        showClose: true,
                        message: '恭喜你，修改成功',
                        type: 'success'
                      });

                      this.getOrder()
                      this.updataVisible = false
                      }).catch(err=>{
                          console.warn(err);
                        })
                } else {
                  alert('提交失败');
                  return false;
                }
              });
        })
        
      },
      handleUpdata(row){
        this.sid = row.sid
        this.imageUrl = row.img
        let url=BASE_URL + '/v1/order/shopOrderIdSearch'
        let params = {sid:this.sid}
        myaxios.get(url,params).then(res=>{
          this.ruleForm = res.data.data[0]
          this.updataVisible = true
        }).catch(err=>{
          console.warn(err);
        })
      },
      addReset(formName) {
        this.$refs[formName].resetFields();
        this.imageUrl = ''
      },
      add(formName) {
        this.ruleForm.img = this.imageUrl
        let url1= BASE_URL + '/v1/index/classNameSearch'
        myaxios.get(url1,{name:this.ruleForm.className}).then(res=>{
             this.ruleForm.code = res.data.data[0].code
             this.$refs[formName].validate((valid) => {
                if (valid) {
                  this.form.className =  this.ruleForm.className
                  this.form.code = this.ruleForm.code
                  this.form.name =  this.ruleForm.name
                  this.form.price =  this.ruleForm.price
                  this.form.img =  this.imageUrl
                  this.form.count =   this.ruleForm.count
                  this.form.status =   this.ruleForm.status
                  this.form.address =   this.ruleForm.address
                  this.form.phone =   this.ruleForm.phone
                  this.form.ordername =   this.ruleForm.ordername
                    let url=BASE_URL + '/v1/order/shopOrderAdd'
                      myaxios.post(url,this.form).then(()=>{
                        this.$message({
                          showClose: true,
                          message: '恭喜你，提交成功',
                          type: 'success'
                        });
                        this.getOrder()
                        this.addVisible = false
                        }).catch(err=>{
                            console.warn(err);
                          })
                  } else {
                    alert('提交失败');
                    return false;
                  }
                });
          }).catch(err=>{
          console.warn(err);
          })
        
      },
      handleAdd(){
        this.ruleForm = {}
       this.addVisible = true
       this.imageUrl = ''
      },
      handleDel(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url=BASE_URL + '/v1/order/shopOrderDelete'
          let params = {sid:row.sid}
            myaxios.get(url,params).then(()=>{
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.getOrder()
              }).catch(err=>{
                    console.warn(err);
                 })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      Close(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      searchName(){
        let url=BASE_URL + '/v1/order/FuzzySearch'
        myaxios.get(url,{status:this.value}).then(res=>{
          if (res.data.code == 200){
            this.order = res.data.data
          }else{
            this.$message({
                  showClose: true,
                  message: '查询失败,该状态订单不存在',
                 type: 'warning'
                });
          }
        }).catch(()=>{
          this.$message({
                  showClose: true,
                  message: '查询失败',
                  type: 'error'
                });
        })

      },
      getProductClass(){
        let url=BASE_URL + '/v1/index/productClassSearch'
        myaxios.get(url).then(res=>{
          this.productClass = res.data.data
          for(var i=0;i<=this.productClass.length;i++){
            this.classNameList.push(this.productClass[i].name) 
          }
        }).catch(err=>{
          console.warn(err);
        })
    },
      getOrder(){
        let url=BASE_URL + '/v1/order/shopOrderAllSearch'
        myaxios.get(url).then(res=>{
          this.order = res.data.data
        }).catch(err=>{
          console.warn(err);
        })
    },
    },
  }
</script>
<style scoped lang="scss">

</style>